<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    <style>
    /* 注意 fade 是我们在 <transition> name="fade" 里自定义的名字 */
    .fade-enter {
      opacity: 0;               /* 进场前透明度为 0 */
    }
    .fade-enter-active {
      transition: opacity 0.3s; /* 进场过程中，从 0 到 1 的变化持续 0.5 秒 */
    }
    .fade-enter-to {
      opacity: 1;               /* 进场结束后透明度为 1 */
    }
    
    .fade-leave {
      opacity: 1;               /* 离场前透明度为 1 */
    }
    .fade-leave-active {
      transition: opacity 0.3s; /* 离场过程中，从 1 到 0 的变化持续 0.5 秒 */
    }
    .fade-leave-to {
      opacity: 0;               /* 离场结束后透明度为 0 */
    }
    
    </style>
    </head>
    <body>
        <div id="app">
          <button @click="toggleShow">
            {{ isShow ? '收起小纸条' : '展开小纸条' }}
          </button>
          
          <!-- 在需要动画的元素外包裹 transition 标签 -->
          <transition name="fade">
            <!-- 通过 v-if 控制段落是否存在 -->
            <p v-if="isShow">有内鬼，停止交易</p>
          </transition>
        </div>
        
        <script src="../../../js/vue.js"></script>
        
        <script>
          new Vue({
            el: '#app',
            data: {
              isShow: false
            },
            methods: {
              toggleShow() {
                this.isShow = !this.isShow;
              }
            }
          });
        </script>

    </body>
</html>